import './TempImageTextA03.scss'

import { useEffect, useState } from 'react'
import { ColorCallBack, assemblyDataA01, getNestedValue } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'

const testData = [
    { label: '加载...', value: 0, unit: '单' },
    { label: '加载...', value: 0, unit: '单' },
]

const TempImageTextA03 = ({ config, apiData }) => {
    const [Data, setData] = useState([])
    const configuration = config || LayoutDeftula.ImageTextA03


    const { list_apiName, list_dataLevel, list_dataType, listArr, describe, field, unit, describe_fill, describe_fontSize,
        align_items, align_content, justify_content, flex_direction, flex_wrap, list_padding, list_margin, list_width,
        describe_fontFamily, describe_fontWeight, describe_fontStyle, describe_shadowX, describe_shadowY, describe_shadowB, describe_shadowC,
        field_fill, field_fontSize, field_fontFamily, field_fontWeight, field_fontStyle, field_shadowX, field_shadowY, field_shadowB, field_shadowC,
        unit_fill, unit_fontSize, unit_fontFamily, unit_fontWeight, unit_fontStyle, unit_shadowX, unit_shadowY, unit_shadowB, unit_shadowC,
        back_fill, back_deg, back_height, back_position, back_distance,
    } = configuration

    const flexStyle = {
        '--alignItems': align_items,
        '--justifyContent': justify_content,
        '--flexDirection': flex_direction,
        '--alignContent': align_content,
        '--flexWrap': flex_wrap,
    }

    const itemStyle = {
        width: list_width + '%',
        padding: list_padding?.split(',').map(num => num + 'px').join(' '),
        margin: list_margin?.split(',').map(num => num + 'px').join(' '),
    }

    const describeStyle = {
        color: describe_fill,
        height: describe_fontSize,
        lineHeight: describe_fontSize + 'px',
        fontSize: describe_fontSize,
        fontFamily: describe_fontFamily,
        fontWeight: describe_fontWeight,
        fontStyle: describe_fontStyle,
        filter: `drop-shadow(${describe_shadowX}px ${describe_shadowY}px ${describe_shadowB}px ${describe_shadowC})`
    }

    const fieldStyle = {
        color: field_fill,
        height: field_fontSize,
        lineHeight: field_fontSize + 'px',
        fontSize: field_fontSize,
        fontFamily: field_fontFamily,
        fontWeight: field_fontWeight,
        fontStyle: field_fontStyle,
        filter: `drop-shadow(${field_shadowX}px ${field_shadowY}px ${field_shadowB}px ${field_shadowC})`
    }

    const unitStyle = {
        color: unit_fill,
        height: unit_fontSize,
        lineHeight: unit_fontSize + 'px',
        fontSize: unit_fontSize,
        fontFamily: unit_fontFamily,
        fontWeight: unit_fontWeight,
        fontStyle: unit_fontStyle,
        filter: `drop-shadow(${unit_shadowX}px ${unit_shadowY}px ${unit_shadowB}px ${unit_shadowC})`
    }

    const backStyle = {
        background: ColorCallBack(back_fill, back_deg),
        height: back_height,
        [back_position]: back_distance,
    }

    useEffect(() => {
        if (apiData?.length !== 0 && list_apiName) {
            const [urlList] = apiData.filter(v => v.name === list_apiName)
            const data = getNestedValue(list_dataLevel, urlList)
            const renderData = assemblyDataA01({ type: list_dataType, data: data, object: listArr, array: { describe, field, unit } })
            setData(renderData.length === 0 ? testData : renderData)
        } else setData(testData)

    }, [config, apiData])

    return (
        <div className='TempImageTextA03'>
            <div className='TextData' style={flexStyle}>
                {Data.map((item, index) => {
                    return (
                        <div key={index} style={itemStyle}>
                            <div className='describe' style={describeStyle}>{item.label}</div>
                            <div className='field'>
                                <div style={fieldStyle}>{item.value}</div>
                                <div style={unitStyle}>{item.unit}</div>
                            </div>
                            <div className='back' style={backStyle} />
                        </div>
                    )
                })}
            </div>
        </div>
    );
};

export default TempImageTextA03;